<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
  <div wicket:id="examples" class="section">
  	<h2 id="statements">Core jQuery statements</h2>
	<p>
		<strong>WiQuery</strong> aims to be close to <strong>jQuery</strong> 
		programming style. That's why WiQuery implements the jQuery API with 
		the same "fluent interface" principle.
	</p>
	<p>
		WiQuery comes with several helpers to bind the whole jQuery API.
		Here are some examples:
	</p>
	<div class="section">
		<h3>Example: CSS Helper</h3>
		<p>
			This example describes how to dynamically change CSS with WiQuery.
			WiQuery eases jQuery integration and provides behaviors to do it with Wicket style.
		</p>
		<p>
			This first example shows how to attach a simple jQuery CSS statement,
			e.g. dynamically style an element with JavaScript.
		</p>		
		<div class="runit">
			<span wicket:id="example1">Example 1!</span>
		</div>
		
		<div class="source">
			<p class="htmlCode">
<code class="html">
&lt;span wicket:id="example1"&gt;Example 1!&lt;/span&gt;
</code>
			</p>
			<p class="javaCode">
<code class="java">
// consider being in a WebPage constructor
public MyWebPage(String id) {
		super(id);
		
		final Label label = new Label("example1", "CSS Helper customized me");
		this.add(label);
		label.add(new WiQueryAbstractBehavior() {
		
			@Override
			public JsStatement statement() {
				return new JsQuery(label).$().chain(CssHelper.css("border", "1px solid red"));
			}
		
		});		
}
</code>
			</p>
			<p>
				This example introduces the <code class="java">WiQueryAbstractBehavior</code> class, which
				is used to attached a jQuery statement to a component. The <code class="java">JsStatement</code> class
				defines a jQuery statement (e.g. what will be generated by our engine). 
			</p>
			<p>
				The <code class="java">JsQuery</code> class implements 	a proper JsStatement initialization
				and the attachment to a Wicket component.
			</p>
			<p>Let's take a closer look	at the querying code:
<code class="js">
public JsStatement statement() {
	return new JsQuery(label).$().chain(CssHelper.css("border", "1px solid red"));
}
</code>
			</p>
			<p>
				The <code class="java">new JsQuery(label)</code> aims to create JsStatements
				for a given component. All of these statements can be chained 
				with other statements to provide a fluent way to write 
				JavaScript code from Wicket.
			</p>
			<p>
				A JsQuery provides the well know jQuery <strong>$</strong> method.
				Consider that a call to the $() method will generate the corresponding
				jQuery statement. If a component is attached to a JsQuery (like 
				the one we wrote before), this will generate:
				<code class="js">$("#thegeneratedcomponentid")</code>.
			</p>
			<p>
				<code class="js">$().chain(CssHelper.css("border", "1px solid red"))</code>
				will chain the corresponding jQuery statement to style elements.
			</p>
			<p>
				WiQuery provides some helpers to bind core jQuery statements.
			</p>
		</div>
	</div>
  </div>
</wicket:panel>
</html>
